<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>The ONE 智能钢琴教室</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no">
    <link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile.css') }}">
    <style>
        a{ text-decoration:none} {# 去掉 a 跳转标签的下划线 #}
    </style>
</head>
<!-- 测评成绩推送页 -->
<body style="background:#f0f0f0;" class='push-grade-page'>
    <div style="display:none">
        <img src="{{ url_for('static', filename='images/wx_logo.jpg') }}">
    </div>
    <div class="evaluation-wrapper">
         <!--如果meiyou评价则还得加个no-score类 -->
			<div class="header">
					<h3 class="title">学习成果页</h3>
			</div>
			<div class="content">
                <div class="student-info">
                    <div class="stat">
                        <div class="agent">{{ title.school_name }}</div>
                        <div class="teacher">教师: {{ title.teacher_name }}</div>
                    </div>

                    <div class="stu">
                        <p class="name">{{ title.student_name }}</p>
                        <span class="date">{{ title.session_date }}</span>
                    </div>
                </div>

                {% for d in data %}
                    <div class="score-content">
                        <div class="score-info">
                            <div class="step">
                                <div class="title">{{ d.map }}<br>{{d.evaluation }}</div>
                                <div class="cont">
                                    <span class="score">{{ d.avg_score }}分</span>
                                </div>
                            </div>
                            <div class="image-desc">
                                {% if d.remark_class.startswith('great')%}
                                    <img src="{{ url_for('static', filename='images/perfect.png') }}" alt="">
                                {% elif d.remark_class.startswith('very-good')%}
                                    <img src="{{ url_for('static', filename='images/good.png') }}" alt="">
                                {% elif d.remark_class.startswith('good')%}
                                    <img src="{{ url_for('static', filename='images/pass.png') }}" alt="">
                                {% elif d.remark_class.startswith('nopass')%}
                                    <img src="{{ url_for('static', filename='images/bad.png') }}" alt="">
                                {% elif d.remark_class.startswith('unfinished')%}
                                    <img src="{{ url_for('static', filename='images/unfinished.png') }}" alt="">
                                {% else %}
                                    <img src="{{ url_for('static', filename='images/unknow.png') }}" alt="">
                                {% endif %}
                            </div>
                        </div>
                        <div class="score-detail">
                        <ul class="lists">
                            <li class="item">
                                <span class="title" id={% if 'evaluation_score' in d.lessons[1]%}{{ d.lessons[1].evaluation_score.activity_id }}{% endif %}>
                                    演奏
                                    {% if 'evaluation_score' in d.lessons[1] and d.lessons[1].evaluation_score.exist_pic %}
                                      <a href="{{ url_for('wechat.record_images', active_id=d.lessons[1].evaluation_score.activity_id ) }}">
                                          <i data-modal-id="" class="iconfont icon-file"></i>
                                      </a>
                                    {% endif %}
                                </span>
                                <span class="sub">
                                    {% if 'evaluation_score' not in d.lessons[1] %}
                                        {{translate('未进行')}}
                                    {% else %}
                                        {{ d.lessons[1].evaluation_score._score }}分
                                    {% endif %}
                                </span>
                            </li>
                            <li class="item">
                                <span class="title">乐理</span>
                                <span class="sub">
                                    {% if 'evaluation_theory' not in d.lessons[1] %}
                                        {{translate('未进行')}}
                                    {% else %}
                                        {{ d.lessons[1].evaluation_theory._score }}分
                                    {% endif %}
                                </span>
                            </li>
                            <li class="item">
                                <span class="title">听力</span>
                                <span class="sub">
                                    {% if 'evaluation_listen' not in d.lessons[1] %}
                                        {{translate('未进行')}}
                                    {% else %}
                                        {{ d.lessons[1].evaluation_listen._score }}分
                                    {% endif %}
                                </span>
                            </li>
                        </ul>
                    </div>
                    </div>
                {% endfor %}
			</div>

			<div class="footer">
					<a href="/wechat/login" class="login">登录查看更多</a>
					<span class="share">分享</span>
					<div class="title">
							<span class="left"></span>
							<span class="name">The ONE智能钢琴教室</span>
							<span class="right"></span>
					</div>
			</div>
			<div class="m-mask">
					<img src="{{ url_for('static', filename='images/fenxiang-android.png') }}">
			</div>
    </div>
</body>
    <script>
        let $ = function(query, all) {
            if (all) {
                    return document.querySelectorAll(query)
            }
            return document.querySelector(query)
        }
        let u = navigator.userAgent;
        if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
                $('.m-mask img').setAttribute('src', '/static/images/fenxiang-ios.png');
        }

        $('.share').addEventListener('click', function() {
            $('.m-mask').style.display = 'block';
        });
        $('.m-mask').addEventListener('click', function() {
            this.style.display = 'none';
        });


{#        $('.icon-file').addEventListener('click', function() {#}
{#            alert($(this).parent());#}
{#            var activity_id = $(this).parent.attr('id');#}
{#            alert(activity_id);#}
{#            var url = '/student/record/images/' + activity_id;#}
{#            $.get(url, function(data){#}
{#                if (data['code']!=0){#}
{#                    alert(data['msg']);#}
{#                    return;#}
{#                }else{#}
{#                    var htmlStr = '';#}
{#                    var imagePaths = data['data']['images'];#}
{#                    for (var i in imagePaths){#}
{#                        htmlStr += '<img width="800px" src="' + imagePaths[i] + '" />';#}
{#                    }#}
{#                    $('#myModal .modal-body').html(htmlStr);#}
{#                    $('#myModal').modal('show');#}
{#                    $('.modal-body>img').width('800px');#}
{#                }#}
{#            }, 'json');#}
{#        });#}

{#        $('.icon-file').bind('click',function(){#}
{#            // alert('click');#}
{#            // coding ...#}
{#            // PC 上可使用 $('.class_name').bind('click', function()) 函数，但手机、微信，等其他终端设备上不能使用，只能用 .addEventListener('click', function())代替#}
{#        });#}
    </script>
</html>
